<template>
  <!-- 注册页面 -->
  <BaseLyaout class="container">
    <template #header></template>
    <template #main>
      <el-row justify="center">
        <!--1--><el-col :span="12" class="form_box">
          <el-form class="el-form" :model="enrollFrom" label-width="auto">
            <el-col :span="24" class="title">注册</el-col>
            <el-form-item label="账号" style="font-size: 60px;">
              <el-input v-model="enrollFrom.name" autocomplete="off" placeholder="请输入账号" size="large" />
            </el-form-item>

            <el-form-item label="密码" style="margin-top: 25px;">
              <el-input v-model="enrollFrom.password" type="password" autocomplete="off" placeholder="请输入密码"
                size="large" />
            </el-form-item>

            <el-form-item label="邮箱" style="margin-top: 25px;">
              <el-input v-model="enrollFrom.email" style="width: 75%;" type="text" autocomplete="off"
                placeholder="请输入邮箱" size="large" />
              <el-button style="margin-left: 10px;margin-top: 10px;" @click="onGetVerifyCode()">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码" style="margin-top: 25px;">
              <el-input v-model="enrollFrom.verifyCode" style="width: 50%;" type="number" autocomplete="off"
                placeholder="请输人验证码" size="large" />
            </el-form-item>
            <el-row justify="center" style="margin-top: 25px;">
              <el-col :span="4.5">
                <el-button size="large" type="warning" @click="onRegister()" class="el-button">注册</el-button>
              </el-col>
              <el-col :span="5"></el-col>
              <el-col :span="4.5">
                <el-button size="large" type="primary" @click="gotoLogin()" class="el-button">前往登录</el-button>
              </el-col>
            </el-row>

            <el-row justify="end">
              <el-col :span="3" style="margin-top: 50px;">
                <router-link to="/change"><el-link type="danger">忘记密码</el-link></router-link>
              </el-col>
            </el-row>

          </el-form>
          <!--1--></el-col>
      </el-row>
    </template>

    <template #footer></template>
  </BaseLyaout>
</template>
<script setup>
import { reactive, ref } from 'vue';
import BaseLyaout from "@/components/BaseLyaout.vue"
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus'
import userMsgInfoStore from '../../stores/useUserStore';
import userHttp from '../../api/userHttp';
import { openInfo } from '../../utils/common'; //消息弹窗工具类
const store = userMsgInfoStore() //store仓库
const router = useRouter()

//注册表单数据
const enrollFrom = reactive({
  name: "",
  password: "",
  email: "",
  verifyCode: null,
  codeType:"enroll",
})

//提交注册表单
function onRegister() {
  // 验证表单完整性
  if (enrollFrom.name == "" || enrollFrom.password == "" || enrollFrom.email == "" || enrollFrom.verifyCode == null) {
    openInfo("", "请输入完整表单信息!")
  } else {
    userHttp.register(enrollFrom).then((res) => {
      openInfo("", res.msg)
      const userData = res.data//用户数据
      if (res.code == 200) {
        store.userId = userData.userId
        store.userName = userData.name
        router.push({ name: 'musicList' })//跳到列表
      }
    })
  }
}

//获取验证码
function onGetVerifyCode() {
  if (enrollFrom.email == "") {
    openInfo("", "未输入邮箱！")
  } else {
    userHttp.getVerifyCode(enrollFrom.email,enrollFrom.codeType).then((data) => {
      openInfo("", data.msg)
    })
  }
}

//点击跳转登录页面
function gotoLogin() {
  router.push({ name: 'login' })
}

</script>

<style scoped>
.container {
  height: 790px;
  width: 100%;
  background-image: url('@/assets/image/enroll_bg.png');
  background-repeat: no-repeat;
  /*不平铺*/
  background-size: cover;
  /*填满容器,多余的图片截掉 */
  background-attachment: fixed;
}

.form_box {
  width: 60%;
  height: 500px;
  border: 2px rgb(233, 171, 171) solid;
  border-radius: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 30px;
  font-family: '宋体';
  color: rgb(26, 214, 180);
}

.el-form {
  max-width: 80%;
  margin-top: 30px;
  margin-left: 50px;
}

.el-button {
  border-radius: 10px;
  background: transparent;
  color: rgb(44, 207, 191);
}
</style>
